import { useUserStore } from '@/stores'
import { createRouter, createWebHistory } from 'vue-router'

// 进度条插件
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
NProgress.configure({
  showSpinner: false
})

// createRouter 是创建路由实例的函数
// createWebHistory 其实就是以前的 mode 路由模式的 history 模式没有井号
// 如果想用井号, 可以将 history 配置换成 createWebHashHistory
// 其中放入的地址是基准路径, 其实就是默认拼接来路径中的前缀
// import.meta.env.BASE_URL 是一个环境变量, 由配置文件的 base 选项决定
// routes 是路由表

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/login',
      component: () => import('@/views/Login/index.vue')
    },
    {
      path: '/user/consult',
      component: () => import('@/views/User/ConsultPage.vue'),
      meta: { title: '问诊记录' }
    },
    {
      path: '/user/patient',
      component: () => import('@/views/User/PatientPage.vue'),
      meta: { title: '家庭档案' }
    },
    {
      path: '/consult/fast',
      component: () => import('@/views/Consult/ConsultFast.vue'),
      meta: { title: '极速问诊' }
    },
    {
      path: '/consult/dep',
      component: () => import('@/views/Consult/ConsultDep.vue'),
      meta: { title: '选择科室' }
    },
    {
      path: '/consult/illness',
      component: () => import('@/views/Consult/ConsultIllness.vue'),
      meta: { title: '病情描述' }
    },
    {
      path: '/consult/pay',
      component: () => import('@/views/Consult/ConsultPay.vue'),
      meta: { title: '问诊支付' }
    },
    {
      path: '/room',
      component: () => import('@/views/Room/index.vue'),
      meta: { title: '问诊室' },
      beforeEnter(to: any) {
        if (to.query.payResult === 'false') return '/user/consult'
      }
    },
    {
      path: '/user/consult/:id',
      component: () => import('@/views/User/ConsultDetail.vue'),
      meta: { title: '问诊详情' }
    },
    {
      path: '/order/pay',
      component: () => import('@/views/Order/OrderPay.vue'),
      meta: { title: '药品支付' }
    },
    {
      path: '/order/pay/result',
      component: () => import('@/views/Order/OrderPayResult.vue'),
      meta: { title: '支付结果(临时显示地图)' }
    },
    {
      path: '/',
      component: () => import('@/views/Layout/index.vue'),
      // 重定向, 如果进来没有指定子路由, 默认转向首页
      redirect: '/home',
      children: [
        {
          path: 'home',
          component: () => import('@/views/Home/index.vue'),
          meta: {
            title: '首页'
          }
        },
        {
          path: 'article',
          component: () => import('@/views/Article/index.vue'),
          meta: {
            title: '健康百科'
          }
        },
        {
          path: 'notify',
          component: () => import('@/views/Notify/index.vue'),
          meta: {
            title: '消息中心'
          }
        },
        {
          path: 'user',
          component: () => import('@/views/User/index.vue'),
          meta: {
            title: '我的'
          }
        }
      ]
    }
  ]
})

// 导航守卫
router.beforeEach((to) => {
  // 开始跳转页面前, 开启进度条
  NProgress.start()

  // 获取仓库的 token
  const store = useUserStore()
  // 准备白名单
  const whiteList = ['/login']
  // 如果当前没有token也不在白名单, 跳到登录页
  if (!store.user?.token && !whiteList.includes(to.path)) {
    return '/login'
  }
})

// 全局后置守卫关闭进度条
router.afterEach((to) => {
  // 当页面进入后, 再关闭进度条和修改页面标题
  NProgress.done()
  document.title = `优医问诊-${to.meta.title}`
})

export default router
